<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <link rel="stylesheet" href="./icon/font_3746846_bjtv4avlthq/iconfont.css">
    <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> -->

    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="logo-card-container">
        <div class="login-card">
            <div class="login-card-logo">
                <img src="pang.jpg" alt="图片加载失败">
            </div>
            <div class="login-card-header">
                <h1>Sign In</h1>
                <div>Please login to use platform</div>
            </div>
            <!-- 登陆表格 -->
            <form class="login-card-form">
                <div class="form-item">
                    <span class="iconfont icon-mail"></span>
                    <input type="text" placeholder="Enter Email Address" required autofocus>
                </div>
                <div class="form-item">
                    <span class="iconfont icon-lock"></span>
                    <input type="password" placeholder="Enter Password" required>
                </div>


                <div class="form-item-other">
                    <div class="checkbox">
                        <input type="checkbox" id="rememberCheckbox">
                        <label for="rememberCheckbox">Remember Me</label>
                    </div>
                    <a href="#">forgot my password</a>
                </div>

            </form>

            <button type="submit">Sign In</button>

            <div class="login-card-footer">
                Dont't have an account?<a href="#">Create a free account</a>
            </div>

        </div>

        <div class="login-card-social">
            <div >Other Sign-in Platform</div>
            <div class="other">
                <div class="lodin-card-social-btn">
                    <a href="#">
                        <span class="iconfont icon-infinite"></span>
                    </a>
                </div>
                <div class="lodin-card-social-btn">
                    <a href="#">
                        <span class="iconfont icon-guanyu"></span>
                    </a>
                </div>
            </div>
            
        </div>


    </div>
</body>
</html>